import React from "react";
import styles from "./Comment.css";
import {WhiteSpace, WingBlank} from "antd-mobile";
import ReactQuill from "react-quill";
import {newComment} from "../../api";
import url from "url";
import Confirm from "../common/Confirm";
import reqwest from "reqwest";

export default class Comment extends React.Component {
    constructor(props) {
        super(props)
        this.state = {text: '', flag: false} // You can also pass a Quill Delta here
        this.handleChange = this.handleChange.bind(this)
        this.submit = this.submit.bind(this)
        this.uuid = url.parse(this.props.location.search, true).query.uuid
    }

    modules = {
        toolbar: [
            [{'header': [1, 2, false]}],
            ['bold', 'italic', 'underline', 'strike', 'blockquote'],
            [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
            ['link', 'image'],
            ['clean']
        ],
        imageUploader: {
            upload: file => {
                console.log(123123)
                return new Promise((resolve, reject) => {
                    reqwest({
                        url: "http://api.tjxl.vooo.xyz/upload?format=json",
                        method: "post",
                        headers:{
                            'Content-Disposition':'attachment;filename=upload.jpg'
                        },
                        // crossOrigin: true,
                        // contentType: "application/json",
                        processData: false,
                        data: file,
                        success: (res) => {
                            console.log(res)
                            resolve("http://api.tjxl.vooo.xyz/"+res.url)
                        },
                        error: (err) => {
                            console.log(err);
                        }
                    });
                });
            }
        }
    }

    formats = [
        'header',
        'bold', 'italic', 'underline', 'strike', 'blockquote',
        'list', 'bullet', 'indent',
        'link', 'image', 'imageBlot'
    ]

    handleChange(value) {
        console.log(value)
        this.setState({text: value})
    }

    render() {
        return (
            <div>
                {this.state.flag ? <Confirm submit={this.submit} cancel={this.cancel}/>
                    :
                    <div>
                        <WhiteSpace/>
                        <WingBlank>
                            <div style={{width: '100%', height: '100%', textAlign: "center"}}>
                                <ReactQuill value={this.state.text}
                                            className={styles.quill}
                                            modules={this.modules}
                                            formats={this.formats}
                                            onChange={this.handleChange}/>
                                <img onClick={this.goTo} style={{paddingTop: '8%', paddingBotton: '8%', width: '72%'}}
                                     src="/img/tj/资源 46@2x.png" alt=""/>
                            </div>
                        </WingBlank>
                    </div>
                }
            </div>
        );
    }

    goTo = () => {
        this.setState({
            flag: true
        })
    }
    cancel = () => {
        this.setState({
            flag: false
        })
    }
    submit = async () => {
        try {
            let res = await newComment(this.uuid, this.state.text)
            this.props.history.push('/success')
        } catch (e) {
            alert("提交失败")
            console.log(e)
        }
    }
}